<script lang="ts" setup>
import { db } from "@/stores/db"
import { useModelStore } from "@/stores/model";
import { notifyError } from "@/util/msg";
// import { getSystemKey } from "@/system/config";
import { t } from "@/i18n/index";
import { watchEffect, ref, toRaw } from "vue";
const modelStore = useModelStore();
const props = defineProps(['labelId']);

const emit = defineEmits(["closeFn", "refreshFn"]);
// function close() {
//   emit("closeFn", false);
// }
const labelData: any = ref({
  name: "",
  zhdesc: "",
  endesc: "",
  family: "",
  action: "",
})
async function save() {
  const saveData = toRaw(labelData.value)
  if (saveData.name == "") {
    notifyError(t('common.inputTitle'))
    return;
  }
  if (saveData.action.length == 0) {
    notifyError(t('model.selectCategory'))
    return;
  }
  if (props.labelId > 0) {
    await db.update("modelslabel", props.labelId, saveData)
  } else {
    saveData.models = []
    //saveData.chanel = getSystemKey('currentChanel')
    //console.log(saveData)
    await db.addOne("modelslabel", saveData)
  }
  emit("closeFn", false);
  emit("refreshFn", true);
}
watchEffect(async () => {
  if (props.labelId > 0) {
    labelData.value = await db.getOne("modelslabel", props.labelId)
  } else {
    labelData.value = {
      name: "",
      zhdesc: "",
      endesc: "",
      family: "",
      action: "",
    }
  }

})
</script>
<template>
  <el-form label-width="100px" style="margin-top:12px">
    <el-form-item :label="t('model.labelName')">
      <el-input v-model="labelData.name" :placeholder="t('model.labelName')" prefix-icon="House" clearable
        resize="none"></el-input>
    </el-form-item>
    <el-form-item :label="t('model.family')">
      <el-input v-model="labelData.family" :placeholder="t('model.family')" prefix-icon="HomeFilled" clearable
        resize="none"></el-input>
    </el-form-item>
    <el-form-item :label="t('model.category')">
      <el-select v-model="labelData.action" :placeholder="t('model.selectCategory')">
        <el-option v-for="(item, key) in modelStore.cateList" :key="key" :label="t('model.' + item)" :value="item" />
      </el-select>
    </el-form-item>


    <el-form-item :label="t('model.chineseDescription')">
      <el-input :placeholder="t('model.chineseDescription')" v-model="labelData.zhdesc"></el-input>
    </el-form-item>
    <el-form-item :label="t('model.englishDescription')">
      <el-input :placeholder="t('model.englishDescription')" :row="3" v-model="labelData.endesc"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" icon="CirclePlus" @click="save">{{ t('common.save') }}</el-button>
    </el-form-item>
  </el-form>
</template>